<template>
  <div class="mainContent">
    <div class="search-content-wrapper">
      <div class="home-big-logo"><img src="../assets/logo.png"></div>
      <div class="home-search-wrapper">

        <form method="get" id="home-searchform" class="clearfix" action="search.html">
          <div class="fdsug-layout">
            <ul>
              <a>
                <li class="bdsug-overflow"><span>更新</span></li>
              </a>
              <a>
                <li class="bdsug-overflow"><span>Flyme</span></li>
              </a>
              <a>
                <li class="bdsug-overflow">新固件</li>
              </a>
              <a>
                <li class="bdsug-overflow">公共控件</li>
              </a>
            </ul>
          </div>
          <span class="icon-search glyphicon glyphicon-search btn-lg"></span>
          <input class="home-form-control" type="text" name="s" id="s" required="required" placeholder="搜索你想要的内容"
                 autocomplete="off"/>
          <input type="submit" class="search-btn" value="搜索">
        </form>
      </div>
    </div>

    <div class="main-content clearfix">
      <section class="hot-content container">
        <h2 class="hot-content-title">热门内容</h2>
        <a class="hot-content-link col-xs-6 col-sm-2"
           href="http://design.flyme.cn/index.html" target="_blank"><img
          class="hot-content-img"
          src="../assets/note.png">
          <h6 class="hot-content-heading">Flyme 6 规范</h6></a>
        <a class="hot-content-link col-xs-6 col-sm-2" href="#"><img class="hot-content-img"
                                                                    src="../assets/appcenter.png">
          <h6 class="hot-content-heading">公共 SDK</h6></a>
        <a class="hot-content-link col-xs-6 col-sm-2" href="#"><img class="hot-content-img"
                                                                    src="../assets/email.png">
          <h6 class="hot-content-heading">DRM 规范</h6></a>
        <a class="hot-content-link col-xs-6 col-sm-2" href="#"><img class="hot-content-img"
                                                                    src="../assets/note.png">
          <h6 class="hot-content-heading">动画规范</h6></a>
        <a class="hot-content-link col-xs-6 col-sm-2" href="#"><img class="hot-content-img"
                                                                    src="../assets/appcenter.png">
          <h6 class="hot-content-heading">WebUI 网页规范</h6></a>
        <a class="hot-content-link col-xs-6 col-sm-2" href="#"><img class="hot-content-img"
                                                                    src="../assets/appcenter.png">
          <h6 class="hot-content-heading">手机助手</h6></a>

      </section>

      <section class="home-columns-row container">
        <div class="home-column home-promo-left home-animation">
          <h2>Flyme 6 动画规范</h2>
          <p>新系统的公共视觉规范，包含视觉、动画、开发等内容</p>
          <a href="#">了解更多</a>
        </div>
        <div class="home-column home-sdk">
          <h2>公共 SDK</h2>
          <p>新系统的公共SDK，还有其他功能</p>
          <a href="#">了解更多</a>
        </div>
      </section>
      <section class="home-columns-row container">
        <div class="home-column home-promo-left home-animation">
          <h2>Flyme 6 动画规范</h2>
          <p>新系统的公共视觉规范，包含视觉、动画、开发等内容</p>
          <a href="#">了解更多</a>
        </div>
        <div class="home-column home-sdk">
          <h2>公共 SDK</h2>
          <p>新系统的公共SDK，还有其他功能</p>
          <a href="#">了解更多</a>
        </div>
      </section>
      <article class="container">
        <div class="selection-heading clearfix">
          <div class="selection-title"><img src="../assets/note.png"><p>文章精选</p></div>
          <div class="selection-more"><a href="article.html">更多></a></div>
        </div>

        <div class="selection-box">
          <a href="#"><h4>Android中的Thread与AsyncTask的区别</h4></a>
          <p>Android原生的AsyncTask.java 是对线程池的一个封装，使用其自定义的的Executor来调用线程的执行方式（并发还是串行），并使用Handler 来完成子线程和主线程数据的共享。</p>
        </div>
        <div class="selection-box">
          <a href="#"><h4>Android中的Thread与AsyncTask的区别</h4></a>
          <p>Android原生的AsyncTask.java 是对线程池的一个封装，使用其自定义的的Executor来调用线程的执行方式（并发还是串行），并使用Handler 来完成子线程和主线程数据的共享。</p>
        </div>
        <div class="selection-box">
          <a href="#"><h4>Android中的Thread与AsyncTask的区别</h4></a>
          <p>Android原生的AsyncTask.java 是对线程池的一个封装，使用其自定义的的Executor来调用线程的执行方式（并发还是串行），并使用Handler 来完成子线程和主线程数据的共享。</p>
        </div>
        <div class="selection-box">
          <a href="#"><h4>Android中的Thread与AsyncTask的区别</h4></a>
          <p>Android原生的AsyncTask.java 是对线程池的一个封装，使用其自定义的的Executor来调用线程的执行方式（并发还是串行），并使用Handler 来完成子线程和主线程数据的共享。</p>
        </div>
      </article>

      <section class="development-tool-layout container">
        <div class="tool-heading clearfix">
          <div class="selection-title"><img src="../assets/note.png"><p>开发工具</p></div>
          <div class="selection-more"><a href="tools.html">更多></a></div>
        </div>
        <a href="#" class="tool-column tool-column-left" title="Flyme 6 SDK">
          <div class="bg-flyme-sdk"></div>
          <div class="tool-column-text">
            <h4>Flyme 6 SDK</h4>
            <p>公共代码合集</p>
          </div>
          <div class="tool-column-img">
            <img src="../assets/appcenter.png">
          </div>
        </a>
        <a href="#" class="tool-column tool-column-left" title="手机助手">
          <div class="bg-phone-helper"></div>
          <div class="tool-column-text">
            <h4>手机助手</h4>
            <p>安卓手机与电脑文件传输</p>
          </div>
          <div class="tool-column-img">
            <img src="../assets/appcenter.png">
          </div>
        </a>
        <a href="#" class="tool-column tool-column-left" title="动态编辑器">
          <div class="bg-dynamic-editor"></div>
          <div class="tool-column-text">
            <h4>动态编辑器</h4>
            <p>让Banner动起来</p>
          </div>
          <div class="tool-column-img">
            <img src="../assets/appcenter.png">
          </div>
        </a>
        <a href="http://drm.meizu.com/" class="tool-column" title="DRM 素材管理">
          <div class="bg-material-management"></div>
          <div class="tool-column-text">
            <h4>DRM 素材管理</h4>
            <p>图片资源共享</p>
          </div>
          <div class="tool-column-img">
            <img src="../assets/appcenter.png">
          </div>
        </a>
      </section>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'mainContent',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .search-content-wrapper {
    background: #2a3546;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    padding: 100px 0 120px 0;
  }

  .home-big-logo {
    text-align: center;
    color: #ffffff;
    line-height: 90px;
    height: 90px;

  }

  .home-search-wrapper {
    display: block;
    margin: 0 auto;
    max-width: 800px;
    padding: 0 24px;
    position: relative;
    width: 100%;
  }

  #home-searchform {
    background: #fff;
    display: block;
    margin: 0;
    width: 100%;
    position: relative;
  }

  .home-form-control {
    /*border-radius: 6px;*/
    border: none;
    color: #212121;
    outline: none;
    height: 36px;
    padding: 8px 8px 8px 72px;
    width: 100%;
  }

  .icon-search {
    text-align: center;
    position: absolute;
    left: 12px;
    top: -4px;
  }

  .search-btn {
    display: none;
  }

  .fdsug-layout {
    display: none;
    margin: 0 auto;
    max-width: 800px;
    padding: 0 24px;
    position: absolute;
    height: auto;
    left: 0;
    top: 38px;
    background: #fff;
    border: 1px solid #ccc;
    /*border-radius: 6px;*/
    width: 100%;
  }

  .fdsug-layout li {
    color: #000;
    font: 14px arial;
    line-height: 30px;
    padding-left: 48px;
    cursor: pointer;
  }

  .fdsug-layout li:hover {
    color: #039be5;
  }

  .main-content {
    margin: 40px auto;
    max-width: 1400px;
    padding: 0 24px;
    position: relative;
  }

  .mz-content {
    margin: 40px auto;
    position: relative;
  }

  .hot-content {
    margin-bottom: 50px;
    text-align: center;
  }

  .hot-content-title {
    font-family: pingfang, sans-serif;
    color: #757575;
    margin-bottom: 40px;
  }

  .hot-content-link {
    color: #757575;
    display: inline-block;
    margin-bottom: 20px;
    /*margin: 0 16px 32px;*/
    /*min-width: 112px;*/
    /*width: calc((100% - 320px)/6);*/
    vertical-align: top;
  }

  .hot-content-link:hover {
    color: #039be5;
    outline: 0;
    text-decoration: none;
  }

  .hot-content-link:hover .hot-content-img {
    transform: scale(1.1);
  }

  .hot-content-img {
    display: block;
    height: 48px;
    margin: 0 auto;
    width: 48px;
    transition: all .3s ease-in-out
  }

  .hot-content-heading {
    font: 500 16px/24px sc-regular, sans-serif;
    margin: 16px 0 0;
    overflow: visible;
  }

  .home-columns-row {
    flex-wrap: wrap;
    /*margin-bottom: 80px;*/
  }

  .home-column {
    display: inline-block;
    overflow: hidden;
    padding: 50px 40px;
    position: relative;
    margin: 0 20px 20px 20px;
    width: calc((100% - 85px) / 2);
    box-shadow: 2px 4px 10px #B8B8B8;
  }

  .home-animation {
    background: #fff;
    color: #000;
  }

  .home-animation p {
    color: #777;
  }

  .home-animation a {
    margin-top: 16px;
    margin-bottom: 28px;
    color: #039be5;
  }

  .home-sdk {
    background: #3e4fa7;
    color: #fff;
  }

  .home-sdk a {
    margin-top: 16px;
    margin-bottom: 28px;
    color: #fff;
  }

  .home-column h2 {
    border-bottom: none;
    font-size: 28px;
    font-family: sc-bold, sans-serif;
    margin: 0 0 16px;
    padding: 0;
  }

  .home-column p {
    padding: 0;
  }

  .home-column img {
    position: absolute;
    right: 0;
    top: 0;
  }

  /*.home-promo-left {*/
  /*margin-right: 40px;*/
  /*}*/

  .selection-heading {
    margin: 30px 20px 0 20px;
  }

  .selection-title {
    float: left;
    display:inline-block;
    vertical-align:middle
  }

  .selection-title img {
    float: left;
    width: 30px;
    height: 30px;
  }
  .selection-title p {
    font-family: pingfang, sans-serif;
    float: left;
    margin: 0 0 0 10px;
    font-size: 22px;
    line-height: 30px;
  }

  .selection-more {
    float: right;
  }

  .selection-more a {
    color: #d38137;
    font-size: 16px;
    line-height: 34px;
  }

  .selection-box {
    display: inline-block;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    margin: 0 20px 20px;
    width: calc((100% - 90px) / 2);
    border-bottom: 1px solid #BBBBBB;
  }

  .selection-box h4 {
    color: #000;
    font-family: sc-bold,sans-serif;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .selection-box p {
    color: #707070;
    line-height: 26px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .development-tool-layout {

  }

  .tool-heading {
    width: 100%;
    padding: 20px;
  }

  .development-tool {
    float: left;
    margin: 0;
  }

  .development-tool img {
    width: 30px;
    height: 30px;
    display: inline;
  }

  .tool-column {
    display: inline-block;
    position: relative;
    background: #fff;
    padding: 0;
    width: calc((100% - 62px) / 4);
    height: 170px;
    box-shadow: 2px 4px 10px #B8B8B8;
  }

  .tool-column-left {
    margin-right: 16px;
  }

  .flyme-sdk {
    /*background: url("../image/sdk.png") no-repeat;*/
    /*background-position: center;*/
    /*background-size: 100%;*/
  }

  .phone-helper {
    /*background: url("../image/phone-helper.png") no-repeat;*/
    /*background-position: center;*/
    /*background-size: 100%;*/
  }

  .dynamic-editor {
    /*background: url("../image/edit.png") no-repeat;*/
    /*background-position: center;*/
    /*background-size: 100%;*/
  }

  .material-management {
    /*background: url("../image/material-management.png") no-repeat;*/
    /*background-position: center;*/
    /*background-size: 100%;*/
  }

  .bg-flyme-sdk {
    width: 0;
    height: 0;
    border-bottom: 170px solid #0a7ede;
    border-right: 50px solid transparent;
    border-left: 140px solid #0a7ede;
  }

  .bg-phone-helper {
    width: 0;
    height: 0;
    border-bottom: 170px solid #4f489c;
    border-right: 50px solid transparent;
    border-left: 140px solid #4f489c;
  }

  .bg-dynamic-editor {
    width: 0;
    height: 0;
    border-bottom: 170px solid #35b1e0;
    border-right: 50px solid transparent;
    border-left: 140px solid #35b1e0;
  }

  .bg-material-management {
    width: 0;
    height: 0;
    border-bottom: 170px solid #de3131;
    border-right: 50px solid transparent;
    border-left: 140px solid #de3131;
  }

  /*这里专为平板做适配*/
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .tool-column {
      display: inline-block;
      position: relative;
      background: #fff;
      padding: 0;
      width: calc((100% - 36px) / 2);
      height: 170px;
      box-shadow: 2px 4px 10px #B8B8B8;
    }

    .bg-flyme-sdk {
      width: 0;
      height: 0;
      border-bottom: 170px solid #0a7ede;
      border-right: 50px solid transparent;
      border-left: 140px solid #0a7ede;
    }

    .bg-phone-helper {
      width: 0;
      height: 0;
      border-bottom: 170px solid #4f489c;
      border-right: 50px solid transparent;
      border-left: 140px solid #4f489c;
    }

    .bg-dynamic-editor {
      width: 0;
      height: 0;
      border-bottom: 170px solid #35b1e0;
      border-right: 50px solid transparent;
      border-left: 140px solid #35b1e0;
    }

    .bg-material-management {
      width: 0;
      height: 0;
      border-bottom: 170px solid #de3131;
      border-right: 50px solid transparent;
      border-left: 140px solid #de3131;
    }
  }

  .tool-column-text {
    position: absolute;
    top: 50%;
    margin-top: -26px;
    left: 4%;
    color: #fff;
  }

  .tool-column-img {
    position: absolute;
    top: 50%;
    margin-top: -26px;
    right: 26px;
    width: 60px;
    height: 60px;
  }

  .tool-column-img img {
    width: 100%;
    height: 100%;
  }

  .tool-column-text h4, .tool-column-text p {
    /*color: #fff;*/
  }

  .tool-column-text h4 {
    font-size: 16px;
    font-family: sf-bold, sans-serif;
  }

  .tool-column-text p {
    font-size: 13px;
  }

  /*首页媒体查询*/
  @media screen and (max-width: 768px) {
    .search-content-wrapper {
      padding: 40px 0 80px 0;
    }

    .main-content {
      margin: 40px auto;
      max-width: 100%;
      padding: 0;
      position: relative;
    }

    .navbar-nav > li {
      margin: 0;
      display: inline-block;
    }

    .icon-search {
      display: none;
    }

    .home-form-control {
      padding-left: 24px;
    }

    .search-btn {
      display: block;
      width: 60px;
      height: 36px;
      position: absolute;
      right: 0;
      top: 0;
      border: 0;
      outline: none;
      background: #387aff;
      color: #fff;
    }

    .fdsug-layout li {
      padding-left: 0;
    }

    .hot-content {
      margin-bottom: 20px;
      text-align: center;
    }

    .home-column {
      display: inline-block;
      overflow: hidden;
      padding: 50px 40px;
      position: relative;
      margin: 20px 0;
      width: calc(100%);
    }

    .selection-box {
      display: inline-block;
      overflow: hidden;
      padding: 20px 0;
      position: relative;
      margin: 0;
      width: calc(100%);
      border-bottom: 1px solid #BBBBBB;
    }

    .bg-flyme-sdk {
      width: 0;
      height: 0;
      border-bottom: 170px solid #0a7ede;
      border-right: 50px solid transparent;
      border-left: 170px solid #0a7ede;
    }

    .bg-phone-helper {
      width: 0;
      height: 0;
      border-bottom: 170px solid #4f489c;
      border-right: 50px solid transparent;
      border-left: 170px solid #4f489c;
    }

    .bg-dynamic-editor {
      width: 0;
      height: 0;
      border-bottom: 170px solid #35b1e0;
      border-right: 50px solid transparent;
      border-left: 170px solid #35b1e0;
    }

    .bg-material-management {
      width: 0;
      height: 0;
      border-bottom: 170px solid #de3131;
      border-right: 50px solid transparent;
      border-left: 170px solid #de3131;
    }

    .tool-column-text h4 {
      font-size: 16px;
    }

    .tool-column-text p {
      font-size: 15px;
    }

    .tool-heading {
      width: 100%;
      margin: 20px 0;
      padding: 0;
    }

    .tool-column {
      display: inline-block;
      position: relative;
      padding: 0;
      width: calc(100%);
      height: 170px;
      margin-bottom: 20px;
    }

    .tool-column-left {
      margin-right: 0;
    }

    .selection-heading {
      margin: 10px 0;
    }
  }
</style>
